<template>
  <div>
    <!-- 高级搜索和菜单会在后期版本添加 -->
    <sui-menu pointing secondary style="display:none;">
      <a is="sui-menu-item" v-for="item in menu.items" :active="isActive(item)" :key="item" :content="item" @click="select(item)" />
      <sui-menu-menu position="right">
        <sui-menu-item>
          <sui-input transparent icon="search" placeholder="Search..." />
        </sui-menu-item>
      </sui-menu-menu>
    </sui-menu>
    <sui-accordion exclusive style="display:none;">
      <sui-accordion-title active>
        <sui-icon name="dropdown" /> 高级搜索
      </sui-accordion-title>
      <sui-accordion-content active>
        敬请期待
      </sui-accordion-content>
    </sui-accordion>
    <sui-card>
      <sui-card-content>
        <sui-card-header>
          <pagination v-if="list.pagination.show" v-sui-floated:right :current-page="list.pagination.currentPage" :total="list.pagination.totalElements" @change="changePage" :page-size="list.pagination.perPage"></pagination>
        </sui-card-header>
      </sui-card-content>
      <sui-card-content>
        <sui-list divided relaxed>
          <a is="sui-list-item" v-for="item in list.items" @click="info(item)">
            <sui-list-icon name="github" size="large" vertical-align="middle" />
            <sui-list-content>
              <a is="sui-list-header">
                <span class="title">{{item.reportTitle}}</span>
              </a>
              <a is="sui-list-description">
                创建于
                <span class="date"> {{item.createdAt}} </span>
                创建人
                <span class="user"> {{item.createdBy}} </span class="content">
              </a>
            </sui-list-content>
          </a>
        </sui-list>
      </sui-card-content>
      <sui-card-content extra>
      </sui-card-content>
    </sui-card>
  </div>
</template>
<script>
import $ from "jquery";
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  remove,
  update,
  axios
} from "service/api";
import pagination from "components/Pagination";
export default {
  components: {
    pagination
  },
  data() {
    return {
      menu: {
        active: "Home",
        items: ["Home", "Messages", "Friends"]
      },
      list: {
        pagination: {
          currentPage: 1,
          perPage: 5,
          totalRows: 10,
          totalElements: 0,
          pageOptions: [5, 10, 15],
          show: false
        },
        loading: true,
        format: [],
        items: []
      }
    };
  },
  mounted() {
    let self = this;
    get(`defects?size=5`).then(response => {
      if (response.status == "200") {
        response.data._embedded.defects.forEach(e => {
          self.list.items.push(e);
        });
        self.list.pagination.totalElements = response.data.page.totalElements;
        self.list.pagination.show = true;
      }
    });
  },
  methods: {
    changePage(page){
      console.log(page);
      this.list.pagination.currentPage = page;
      let self = this;
      get(`defects?page=${this.list.pagination.currentPage}&size=5`).then(
        response => {
          if (response.status == "200") {
            self.list.items = [];
            response.data._embedded.defects.forEach(e => {
              self.list.items.push(e);
            });
            self.list.pagination.totalElements =
              response.data.page.totalElements;
            self.list.pagination.show = true;
          }
        }
      );
    },
    info(item) {
      this.$router.push({
        path: "info.html",
        query: { entry: item }
      });
    },
    isActive(name) {
      return this.menu.active === name;
    },
    select(name) {
      this.menu.active = name;
    }
  }
};
</script>
<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.content:not(.custom) {
  max-width: none;
}
.ui.card,
.ui.cards > .card {
  width: 100%;
  -webkit-box-shadow: none;
}
</style>